<template>
    <div class="wrapper">
        <header>
            <button class="fa fa-arrow-left back-icon" @click="router.back()"></button>
            <input v-model="searchQuery" class="search-input" type="text" placeholder="搜索商家或商品"
                @keyup.enter="searchBusiness" />
            <button class="search-btn" @click="searchBusiness"><i class="fa fa-search"></i></button>
        </header>

        <div class="hint" v-if="!searchQuery && !results.length">输入关键词开始搜索</div>
        <div class="hint" v-if="loading">正在搜索...</div>
        <div class="hint error" v-if="error">{{ error }}</div>

        <ul class="business" v-if="!loading && results.length">
            <li v-for="b in results" :key="b.businessId || b.id" class="business-item"
                @click="toBusinessDetail(b.businessId || b.id)">
                <div class="business-img-box">
                    <img :src="getBusinessImg(b.businessImg)" class="business-img" alt="商家图片" />
                </div>
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>{{ b.businessName || b.name }}</h3>
                    </div>
                    <div class="business-info-explain">
                        <span>{{ b.businessExplain }}</span>
                    </div>
                    <div class="business-info-position">
                        <i class="fa fa-location-arrow"></i>
                        <span>{{ b.businessAddress }}</span>
                    </div>
                    <div class="business-info-delivery">
                        <span>¥{{ b.startPrice }}起送 | ¥{{ b.deliveryPrice }}配送</span>
                    </div>
                </div>
            </li>
        </ul>

        <div class="hint" v-if="!loading && searchQuery && !results.length">无匹配商家</div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const route = useRoute()

const searchQuery = ref((route.query.keyword || '').toString())
const results = ref([])
const loading = ref(false)
const error = ref('')

async function searchBusiness() {
    const kw = (searchQuery.value || '').trim()
    results.value = []
    error.value = ''
    if (!kw) return
    loading.value = true
    try {
        // 仅按名称搜索
        const res = await axios.get('/businesses/search', { params: { name: kw } })
        const body = res.data
        results.value = Array.isArray(body?.data) ? body.data : []
        if (body?.success === false) error.value = body?.message || '搜索失败'
    } catch (e) {
        console.error('[searchBusiness]', e?.response?.status, e?.response?.data || e)
        error.value = '搜索失败，请稍后重试'
    } finally {
        loading.value = false
    }
}

function getBusinessImg(img) {
    // 网络图片直接返回
    if (img && (img.startsWith('http://') || img.startsWith('https://'))) {
        return img;
    }
    // 本地图片用 require
    try {
        return require('../assets/' + img);
    } catch (e) {
        // 图片不存在时返回默认图片
        return require('../assets/default.png');
    }
}

function toBusinessDetail(businessId) {
    if (!businessId) return
    router.push({ path: '/businessInfo', query: { businessId } })
}

onMounted(() => {
  if ((searchQuery.value || '').trim()) {
    searchBusiness()
  }
})

watch(() => route.query.keyword, (kw) => {
  searchQuery.value = (kw || '').toString()
  if ((searchQuery.value || '').trim()) {
    searchBusiness()
  } else {
    results.value = []
  }
})
</script>

<style scoped>
.wrapper {
    width: 100vw;
    min-height: 100vh;
    background: #f7f8fa;
}

header {
    width: 100%;
    height: 12vw;
    background: #0097ff;
    display: flex;
    align-items: center;
    padding: 0 3vw;
    box-sizing: border-box;
}

.back-icon {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 5vw;
    margin-right: 2vw;
}

.search-input {
    flex: 1;
    height: 8vw;
    border-radius: 2vw;
    border: 1px solid #ccc;
    padding: 0 3vw;
    font-size: 3.5vw;
    background: #fff;
}

.search-btn {
    margin-left: 2vw;
    height: 8vw;
    padding: 0 3vw;
    background: #fff;
    border: none;
    border-radius: 2vw;
    color: #0097ff;
}

.hint {
    text-align: center;
    color: #888;
    padding: 4vw 0;
}

.hint.error {
    color: #ff4d4f;
}

.business {
    list-style: none;
    padding: 0;
    margin: 3vw auto;
    width: 92vw;
}

.business-item {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 4vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 3vw;
    padding: 2vw 3vw;
    cursor: pointer;
    border: 1px solid #eee;
}

.business-item:hover {
    box-shadow: 0 4px 16px rgba(0, 151, 255, 0.08);
    border-color: #0097ff;
}

.business-img-box {
    width: 30vw;
    height: 30vw;
    border-radius: 2vw;
    overflow: hidden;
    background: #eee;
    margin-right: 4vw;
}

.business-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-info {
    flex: 1;
}

.business-info-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
}

.business-info h3 {
    margin: 0;
    font-size: 4vw;
    color: #333;
}

.business-info-explain {
    color: #666;
    font-size: 2.8vw;
    margin-bottom: 3vw;
}

.business-info-position {
    color: #666;
    font-size: 3vw;
    display: flex;
    align-items: center;
}

.business-info-position .fa-location-arrow {
    margin-right: 1vw;
    color: #70bc46;
}

.business-info-delivery {
    color: #666;
    font-size: 3.1vw;
    margin-top: 1vw;
}
</style>